<template>
    <modal class='component-image-view' :show='show' @close='emitClose' view :deleteButton='deleteButton' @delete='emitDelete' width='80%'>
        <div class='component-image-view__content'><img :src="url"></div>
    </modal>
</template>

<script>
    import modal from './Modal.vue'

    export default {
        props:{
            url:{
                type: String,
                default: false,
                required: true,
            },
            deleteButton:{
                type: Boolean,
                default:false
            },
            show:{
                type: Boolean,
                required: true,
            }
        },
        data() {
            return {

            }
        },
        methods:{
            emitClose(){
                this.$emit('close')
            },
            emitDelete(){
                this.$emit('delete')
            }
        },
        components:{ modal }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-image-view{
        .component-modal__container{
            background-color: transparent;
            box-shadow:none;
            height:80%;

        }
        .component-modal__main{
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow:auto;
            -webkit-overflow-scrolling: touch;
        }
    }
    .component-image-view__content{
        // box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.12), 0 16px 16px 0 rgba(0, 0, 0, 0.12);
        img{
            // position: absolute;
            // top:50%;
            // left:50%;
            // transform:translate(-50%, -50%);
            max-width: 100%;
        }
    }
</style>


